<!--
 * @Author: Huangxianlong
 * @Date: 2023-09-07 15:13:12
 * @LastEditors: Huangxianlong
 * @LastEditTime: 2023-09-07 16:38:56
 * @FilePath: \vue3-element-admin\src\views\monitor\index.vue
 * @Description: 
-->
<template>
  <div class="monitor-container page-height">
    <el-card>
      <template #header> 传感器数据 </template>
      <el-row>
        <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
          <Echarts
            id="temperature"
            height="300px"
            :full-options="temperatureOptions"
            :loading="loading"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
          <Echarts
            id="humidity"
            height="300px"
            :full-options="humidityOptions"
            :loading="loading"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
          <Echarts
            id="soilMoisture"
            height="300px"
            :full-options="soilMoistureOptions"
            :loading="loading"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
          <Echarts
            id="lightIntensity"
            height="300px"
            :full-options="lightIntensityOptions"
            :loading="loading"
          />
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <template #header> 温湿度数据折线图 </template>
      <Echarts
        id="tempHum"
        height="300px"
        :full-options="tempHumOptions"
        :loading="loading"
      />
    </el-card>
    <el-card>
      <template #header> 传感器数据折线图 </template>
      <Echarts
        id="sensor"
        height="300px"
        :full-options="sensorOptions"
        :loading="loading"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 状态管理依赖
import { useMonitorStore } from "@/store/modules/monitor";
import { SensorData } from "@/api/monitor/types";
import Echarts from "@/components/Echarts/Echarts.vue";
import chartOption from "@/components/Echarts/options";
const monitorStore = useMonitorStore();
const sensorData = reactive<SensorData>({
  uid: "750a73015606412886f1763a1ad29ce5",
  topic: "temp",
  num: "10",
});
// 温度传感器速度表的options
const temperatureOptions = reactive({
  options: {},
  init: false,
});
// 湿度传感器速度表的options
const humidityOptions = reactive({
  options: {},
  init: false,
});
// 土壤湿度传感器速度表的options
const soilMoistureOptions = reactive({
  options: {},
  init: false,
});
// 光照强度传感器速度表的options
const lightIntensityOptions = reactive({
  options: {},
  init: false,
});
// 温湿度传感器折线图的options
const tempHumOptions = reactive({
  options: {},
  init: false,
});
// 传感器折线图的options
const sensorOptions = reactive({
  options: {},
  init: false,
});
let loading = ref(true);
/**
 * 根据对象的一个属性值对数组去重
 * @param arr  数组
 * @param attrName 属性名
 * @returns Array去重后的新数组
 */
function arrayUnique(arr: [], attrName: string) {
  const res = new Map();
  return arr.filter((a) => !res.has(a[attrName]) && res.set(a[attrName], 1));
}

function getMonitorData() {
  loading.value = true;
  try {
    monitorStore.getSensorData(sensorData).then((res) => {
      console.log(res);
      const arrList: any = arrayUnique(res.list.data, "time");
      const tempHumData = arrList
        .map((res: any) => {
          const re = res.msg.split("#").filter((item: any) => item !== "");
          const obj: any = {};
          obj["time"] = res.time;
          obj["temperature"] = re[0];
          obj["humidity"] = re[1];
          return obj;
        })
        .reverse();
      tempHumOptions.options = chartOption.pieWarinFour(tempHumData, [
        "time",
        "temperature",
        "humidity",
      ]);
      tempHumOptions.init = true;
      const sensorData = arrList
        .map((res: any) => {
          const re = res.msg.split("#").filter((item: any) => item !== "");
          const obj: any = {};
          obj["time"] = res.time;
          obj["lightIntensity"] = re[2];
          obj["soilMoisture"] = re[3];
          obj["carbonDioxide"] = re[4];
          return obj;
        })
        .reverse();
      sensorOptions.options = chartOption.sensorData(sensorData, [
        "time",
        "lightIntensity",
        "soilMoisture",
        "carbonDioxide",
      ]);
      sensorOptions.init = true;
      const list = arrList[0].msg.split("#").filter((item: any) => item !== "");
      temperatureOptions.options = chartOption.temperature(list[0]);
      temperatureOptions.init = true;
      humidityOptions.options = chartOption.humidity(list[1]);
      humidityOptions.init = true;
      soilMoistureOptions.options = chartOption.soilMoisture(list[2]);
      soilMoistureOptions.init = true;
      lightIntensityOptions.options = chartOption.lightIntensity(list[3]);
      lightIntensityOptions.init = true;
    });
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  }
}

onMounted(() => {
  getMonitorData();
});
</script>

<style lang="scss" scoped>
:deep(.el-card__header),
:deep(.el-card__body) {
  padding: 10px;
}

:deep(.el-card__header) {
  font-size: 20px;
  font-weight: bold;
}

.monitor-container {
  padding: 24px;
  position: relative;

  .el-card {
    margin-bottom: 10px;
  }
}
</style>
